﻿<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="checkDemo.css" />
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function() {
            //点击添加数据的时候，显示数据输入框

            $('#j_btnAddData').click(function() {
                    $('#j_mask').css('display', 'block')
                    $('#j_formAdd').css('display', 'block')

                })
                //点击输入框的关闭按钮，隐藏对话框
            $('#j_hideFormAdd').click(function() {
                    $('#j_mask').css('display', 'none')
                    $('#j_formAdd').css('display', 'none')
                })
                //添加数据
            $('#j_btnAdd').click(function() {
                var lesson = $('#j_txtLesson').val()
                var txtBelSch = $('#j_txtBelSch').val()

                if (lesson.trim() == '' || txtBelSch.trim() == '') {
                    //trim() 不能输入空格
                    alert("课程或者学院不能为空")
                    return
                }
                //动态创建元素
                $('<tr>  <td>' + lesson + '</td>   <td>  ' + txtBelSch + '<td>   <a href="javascrip:; " class="get">GET</a>  </td></tr>').appendTo('#j_tb')
                $('#j_mask').css('display', 'none')
                $('#j_formAdd').css('display', 'none')

                $('#j_txtLesson').val()

            })
            $('#j_tb').on('click', '.get', function() {
                $(this).parent().parent().remove()
            })

        })
    </script>

</head>


<body>
    <div class="wrap">
        <div>
            <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd" />
        </div>
        <table>
            <thead>
                <tr>
                    <th>课程名称</th>
                    <th>所属学院</th>
                    <th>已学会</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>JavaScript</td>
                    <td>传智播客-前端与移动开发学院</td>
                    <td><a href="javascrip:;" class="get">GET</a></td>
                </tr>
                <tr>
                    <td>css</td>
                    <td>传智播客-前端与移动开发学院</td>
                    <td><a href="javascrip:;" class="get">GET</a></td>
                </tr>
                <tr>
                    <td>html</td>
                    <td>传智播客-前端与移动开发学院</td>
                    <td><a href="javascrip:;" class="get">GET</a></td>
                </tr>
                <tr>
                    <td>jQuery</td>
                    <td>传智播客-前端与移动开发学院</td>
                    <td><a href="javascrip:;" class="get">GET</a></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="j_mask" class="mask"></div>
    <div id="j_formAdd" class="form-add">
        <div class="form-add-title">
            <span>添加数据</span>

            <div id="j_hideFormAdd">x</div>
        </div>
        <div class="form-item">
            <label class="lb" for="j_txtLesson">课程名称：</label>
            <input class="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称">
        </div>
        <div class="form-item">
            <label class="lb" for="j_txtBelSch">所属学院：</label>
            <input class="txt" type="text" id="j_txtBelSch" value="传智播客-前端与移动开发学院">
        </div>
        <div class="form-submit">
            <input type="button" value="添加" id="j_btnAdd">
        </div>
    </div>




</body>

</html>